<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- 外部样式 -->
    <link rel="stylesheet" href="./div_2.css" />

    <!-- 内联样式和外部样式在书写时，样式发生冲突，
     在优先级相同的情况下，以写在后面的为主，
     如果不相同，则以优先级高的为主。 -->

    <!-- 内部样式 -->
    <style>
      /* 导入式样式(了解),优先级最低 */
      @import url(./div_3.css);
      .div_1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="div_1">内部样式</div>
    <div class="div_2">外部样式</div>
    <div class="div_3">导入式样式</div>
    <!-- 行内样式(了解，不常用) -->
    <!-- 行内样式优先级最高 -->
    <div class="div_4" style="color: brown">行内样式</div>
  </body>
</html>
